<template>
  <div class="full-right">
    <div v-for="(item, index) in list" :key="index" :class="['full-right-box-'+index, 'full-right-box']">
      <div class="full-right-item">
        <div class="full-right-item-title">{{ item.title }}</div>
        <div v-if="index!==2" class="full-right-item-JDT">
          <div v-for="(item1, index1) in item.children" :key="index1" class="full-right-item-JDT-children">
            <div class="full-right-item-JDT-children-title">
              {{ item1.title }}
            </div>
            <div class="full-right-item-JDT-children-box">
              <dv-percent-pond :config="{value:item1.value,colors: ['#1492FF']}" :border-width="1" style="width:80%;height:60%;" />
              <div class="full-right-item-JDT-children-box-value">{{ item1.value }}</div>
            </div>
          </div>
        </div>
        <div v-else class="full-right-item-renwu">
          <dv-scroll-board :config="item.data" style="width:100%;height:100%" />
        </div>
        <!-- <div v-if="index===0" class="full-right-item-XXTD">
          <div class="full-right-item-XXTD-title">上级转移未付</div>
          <div v-for="(item1, index1) in item.children" :key="index1" class="supervision-left-content-item-XXTD-children">
            <div class="supervision-left-content-item-XXTD-children-img">
              {{ item1.num }}
            </div>
            {{ item1.title }}
          </div>
        </div>
        <div v-else class="supervision-left-content-item-echart">
          <VEcharts
            autoresize
            :options="item.options"
            style="width: 100%; height: 100%"
          />
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Right',
  props: {
    list: {
      type: Array,
      default: () => ([])
    }
  }
};
</script>

<style lang="scss" scoped>
.full-right{
  padding: 1%;
  color: #1fd2ff;
  .full-right-box-0,.full-right-box-1{
    height: 25%;
    .full-right-item-JDT{
      height: 80%;
      padding-top: 5%;
      padding-bottom: 5%;
      .full-right-item-JDT-children{
        height: 50%;
        padding-left: 7%;
        .full-right-item-JDT-children-title {
          font-size: 12px;
          height: 40%;
          display: flex;
          align-items: center;
        }
        .full-right-item-JDT-children-box{
          height: 60%;
          display: flex;
          align-items: center;
          .dv-percent-pond{
            /deep/ text {
              display: none;
            }
          }
          .full-right-item-JDT-children-box-value{
            padding-left: 2%;
          }
        }
      }

    }
  }
  .full-right-box-2{
    height: 50%;
    //任务列表
    .full-right-item-renwu{
      height: 80%;
      padding: 5%;
    }
  }
  .full-right-box{
    padding-top: 5%;
    .full-right-item{
      background-image: url('~@/assets/images/fullscreen/xmlx.png');
      height: 100%;
      background-size: 100% 100%;
      .full-right-item-title{
        font-size: 18px;
        height: 20%;
        padding-left: 10%;
        padding-top: 5%;
      }
    }
  }
}
</style>
